<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript:核心语法DOM(针对页面操作)+BOM(针对浏览器)
		     学习主体   针对页面操作比较多  ---DOM操作
			 JQuery操作DOM:理解:JQ框架改变页面内容效果
			 js基础就可以直接学习，了解函数使用
			 基础函数 ---事件源之后出现，事件源语法糖中
			 heml()    作用：增加一个元素，覆盖原有html
			 val()     作用：针对input元素，实现修改文本内容
			 text()    作用：生成文本内容
 		 
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
		 
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，下面产生一行文本 -->
		<button>按钮</button>
		<div style="width: 200px; height: 200px; background: black;"></div>
		<h3>lorem</h3>
		
		<input type="button" value="按钮2"/>
		<input type="text" value="输入框可以直接写文本" />
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore neque tenetur vitae exercitationem magni iste, modi quam molestias quidem consectetur nemo perspiciatis illo explicabo laboriosam ratione libero? Possimus, minus mollitia!</p>
	    <script>
			$("button").click(function(){
				/*JQ操作DOM---html()函数使用*/
				$("p").html("<h1>JQ操作DOM—html函数使用</h1>");
			});
			/*练习1：div 200*200 背景颜色：黑色，鼠标划过之后，
			  下面内容修改：<h3>提示，修改为黄色
			*/
		   $("div").mouseenter(function(){
		   	/*JQ操作DOM---html()函数使用*/
		   	$("h3").html("<h3>黄颜色</h3>");
			
		   });
		   /*练习2：按钮 文本框    点击按钮，文本框增加一行文本*/
		   $("input[type='button']").click(function(){
		   	// alert("jq选择器是否选中")
			$("input[type='text']").val("文本框内容修改")
		   });
		   /*利用JQ操作DOM(页面效果)   1.元素内容操作（3个函数）
		                                html()
										val()
										text()
		                              2.属性操作（4个函数）
									  <p align="center">
									   attr()
									   removeAttr()
									   <input checked>
									   prop()
									   removeProp()
									  3.样式类名操作（4个函数）
									  .demo{属性：属性值..}
									  addClass()
									  removeClass()
									  toggleClass()
									  hasClass()
									  4.元素样式操作(5个函数)
									  css()
									  语法：css("css属性","css属性值")
									  $("选择器").attr().addClass()
									  插入和删除操作(7个函数)
									  元素遍历操作(6个函数)
									  JQ动画操作(7个函数)
		   
		   */
		</script>
		
		
		
	</body>
</html>